<template>
  <div class="login-page login-register-page">
    <div class="login-left">
      <div class="login-left-tab">人证合一，自荐入职拿奖金</div>
      <el-input placeholder="请输入手机号" class="theme-input" v-model="params.phone">
        <img slot="prefix" src="../../assets/img/register/phone.png" height="34px">
      </el-input>

      <div class="identify">
        <el-col :span="13">
          <el-input placeholder="图形验证码" class="theme-input input-img-canvas" v-model="imgCode">
            <img slot="prefix" src="../../assets/img/register/anquan.png" height="30px">
          </el-input>
        </el-col>
        <el-col :span="7">
          <s-identify :identifyCode="identifyCode"></s-identify>
        </el-col>
        <el-col :span="4" class="login-canvas-button">
          <el-button type="text" @click="refreshCode">
            看不清
            <br>换一张
          </el-button>
        </el-col>
      </div>

      <el-input placeholder="请输入短信验证码" class="theme-input" v-model="params.sms">
        <img slot="prefix" src="../../assets/img/register/123.png" height="30px">
        <el-button
          slot="suffix"
          type="text"
          class="login-left-text-blue"
          @click="sendCode"
          :disabled="codeLeftTime!=60"
        >
          发送验证码
          <span v-if="codeLeftTime!=60">({{codeLeftTime}})</span>
        </el-button>
      </el-input>
      <el-input placeholder="设置密码" show-password class="theme-input" v-model="params.password">
        <img slot="prefix" src="../../assets/img/register/lock.png" height="29px">
      </el-input>
      <el-input
        placeholder="确认密码"
        show-password
        class="theme-input"
        v-model="params.confirmPassword"
      >
        <img slot="prefix" src="../../assets/img/register/lock1.png" height="29px">
      </el-input>
      <el-button class="theme-button login-button" @click="doSecond">下一步</el-button>
    </div>
    <div class="login-right">
      <right-image text="已有账号，" button="立即登录"></right-image>
    </div>
  </div>
</template>

<script>
import SIdentify from './picVerfication'
import rightImage from './right-image'
import validate from '../../assets/utils/validate.js'
export default {
  props: ['params'],
  data() {
    return {
      imgCode: '',
      identifyCode: '',
      identifyCodes: '1234567890',
      codeLeftTime: 60 //获取验证码间隔
    }
  },
  methods: {
    //下一步点击事件
    doSecond() {
      //验证并跳转到第二个页面
      if (!this.check()) return false
      this.$emit('input', 1)
    },
    check() {
      if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
        return false
      }
      if (this.identifyCode != this.imgCode) {
        _g.message('图形验证码不正确', 'warning')
        return false
      }
      if (this.checkSmsPassword()) {
        _g.message('短信验证码不一致', 'warning')
        return false
      }
      if (this.params.password == '' || this.params.confirmPassword == '') {
        _g.message('密码不能为空', 'warning')
        return false
      }
      if (this.params.password != this.params.confirmPassword) {
        _g.message('输入密码不一致请重新输入', 'warning')
        return false
      }

      return true
    },
    //验证短信验证码是否一致
    checkSmsPassword() {
      let params = {
        phone: this.params.phone,
        yards: this.params.sms
      }
      _g.apiPost('/login/checkSMS.do', params).then(res => {
        if (res.status != 0) {
          return false
        }
        return true
      })
    },
    sendCode() {
      //点击发送验证码
      if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
        _g.message('请输入正确的手机号', 'warning')
      } else if (this.identifyCode != this.imgCode) {
        _g.message('图片验证码不正确', 'warning')
      } else {
        _g.apiPost('/talent/validatePhone.do', {
          phone: this.params.phone
        }).then(res => {
          if (res.status === 0) {
            this.params.sms = ''
            _g.apiPost('/login/sendSmsPassword.do', {
              phone: this.params.phone
            }).then(res => {
              _g.toMessage(res)
              if (res.status == 0) {
                this.setCodeTime()
              }
            })
          } else {
            _g.toMessage(res)
          }
        })
      }
    },
    init() {
      let left_time = localStorage.getItem(localSaved.registerTime)
      if (left_time > 0 && left_time != 60) {
        this.codeLeftTime = left_time
        clearInterval(this.settime)
        this.setCodeTime()
      }
    },
    /**
     * @name 设置验证码延时
     */
    setCodeTime() {
      this.settime = setInterval(() => {
        this.codeLeftTime--
        localStorage.setItem(localSaved.registerTime, this.codeLeftTime)
        if (this.codeLeftTime == 0) {
          clearInterval(this.settime)
          this.codeLeftTime = 60
          localStorage.setItem(localSaved.registerTime, this.codeLeftTime)
        }
      }, 1000)
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    }
  },
  created() {
    this.makeCode()
    this.init()
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  components: {
    rightImage,
    SIdentify
  }
}
</script>

<style lang="scss" scoped>
.input-img-canvas {
  width: 180px !important;
  height: 55px !important;
  input {
    width: 100%;
    height: 100%;
  }
}
.identify {
  margin: 0 0 16px 0;
  width: 360px;
  height: 55px;
  display: inline-block;
}
.register-agreement {
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #999;
  font-weight: 400;
  span {
    color: #f15c18;
  }
}
</style>
